import React, { useState, useEffect } from 'react'
import axios from 'axios'
import style from './pet.module.css'
import { useNavigate } from 'react-router-dom'
import timestampToTime from '../../utils/formatDate'
let { PetCommonSense, CommonSenseCard, title, main, contents, pic, date } =
  style
export default function Pet() {
  const [CommonSenseCardList, setList] = useState([])
  const navigate = useNavigate()

  useEffect(() => {
    axios.get('http://localhost:3004/CommonSenseCards').then(res => {
      setList(res.data)
    })
  }, [])
  return (
    <div className={PetCommonSense}>
      {CommonSenseCardList.map(function (ele) {
        return (
          <div
            key={ele.id}
            className={CommonSenseCard}
            onClick={() => {
              navigate(`/detail/${ele.id}`, {
                state: {
                  title: ele.title,
                  contents: ele.contents,
                  imgUrl: ele.imgUrl,
                  date: ele.date,
                },
              })
            }}
          >
            <span className={title}>{ele.title}</span>
            <div className={main}>
              <p className={contents}>{ele.contents}</p>
              <img src={ele.imgUrl} alt="" className={pic} />
            </div>
            <span className={date}>{timestampToTime(ele.date * 1)}</span>
          </div>
        )
      })}
    </div>
  )
}
